import { Button, Divider } from 'antd'
import { fabric } from 'fabric'
import { useEffect } from 'react'

export default function View() {
  let canvas: fabric.Canvas | null = null
  let staticCanvas: fabric.StaticCanvas | null = null

  const rect = new fabric.Rect({
    top: 40,
    left: 40,
    width: 30,
    height: 30,
    fill: 'orange'
  })

  useEffect(() => {
    canvas = new fabric.Canvas('c', {
      width: 500,
      height: 500
      // backgroundColor: '#aa96da'
      // backgroundColor: 'rgba(0, 0, 0, 0.1)'
    })
    canvas?.add(rect)

    // 不可交互的画布
    staticCanvas = new fabric.StaticCanvas('static')
    rect.clone((obj: fabric.Rect) => {
      // obj.set('fill', '#ff69b4')
      staticCanvas?.add(obj)
    })
  }, [])

  return (
    <div className='view-wrapper'>
      <Divider plain>画布的基础用法</Divider>
      <Button onClick={() => canvas?.setWidth(200)}>宽度200</Button>
      <Button onClick={() => canvas?.setHeight(300)}>高度300</Button>
      <Button onClick={() => canvas?.setDimensions({ width: 600, height: 400 })}>
        一键设置宽高：宽度600px，高度400px
      </Button>
      <canvas
        id='c'
        style={{ border: '1px solid #ccc', boxSizing: 'border-box' }}
        // width='300'
        // height='300'
      ></canvas>

      <Divider plain>不可交互的画布</Divider>
      <canvas id='static' style={{ border: '1px solid #ccc' }}></canvas>
    </div>
  )
}
